<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../framework/header.jsp" />
<link href="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<style>
<!--
.app-detail-wrapper{position:relative;min-height:140px;}
.detail-controls{position:absolute;top:20px;right:20px;}
.detail-controls .btn{font-size: 12px;padding:0;line-height: 32px;height: 32px;width: 38px;}
.app-detail-wrapper .detail-image{position:absolute;top:30px;left:20px;width: 120px;}
.app-detail-wrapper .detail-image img{width:100%;}
.app-detail-wrapper .detail-content{margin-left:140px;}
.app-detail-wrapper .detail-content .app_name{font-size: 16px;font-weight: 600;color: #333;margin-bottom:20px;}
.app-detail-wrapper .detail-content .app_name .badge{}
#container .badge{font-weight:normal;}
.app-detail-wrapper .detail-content .row p{position:relative;    margin-bottom: 20px;}
.app-detail-wrapper .detail-content label{position:absolute;top:0;left:0;width:60px;}
.app-detail-wrapper .detail-content label.label-sm{width:35px;}
.app-detail-wrapper .detail-content .col-lg-6>p:last-child{margin:0;}
.app-detail-wrapper .detail-content .row p>span{display:block;margin:0 30px 0 60px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.app-detail-wrapper .detail-content .row p.app-desc{padding:0 30px 0 60px}
.app-detail-wrapper .detail-content .row p.app-desc>span{margin:0;}
.app-detail-wrapper .detail-content .row p.app-desc textarea{display:none;resize: vertical;min-height:42px;
	/* position: absolute;top: -3px;left: 60px;right: 26px; */}
.app-detail-wrapper .detail-content label.label-sm+span{margin-left:35px;}
.app-detail-wrapper .app-desc .btn{position:absolute;right:0;top:-1px;padding: 3px 2px 1px 4px;color: #333;font-size: 12px;
	background: #f4f4f4;border-color: #d1d1d1;}
-->
</style>
<div id="container"
	class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">
	<jsp:include page="../framework/topper.jsp" />
	<div class="boxed">
		<%--=======================  页面主体内容  ============================--%>
		<div id="content-container">
			<div class="wrappers">
				<%--=========================  页面标题  ==========================--%>
				<div id="page-title">
					<p class="page-header text-overflow table-header">
						xx详情&nbsp;&nbsp;<small>说明文字</small>
					</p>
				</div>
				<ol class="breadcrumb">
					<li><a href="#">UI样式</a></li>
					<li class="active">xx详情</li>
				</ol>
				<div id="page-content">
					<div class="panel">
						<div class="panel-body app-detail-wrapper">
							<div class="detail-controls">
								<a class="btn btn-icon btn-hover-primary btn-sm"><i class="fa fa-refresh"></i></a>
								<a class="btn btn-icon btn-hover-primary btn-sm"><i class="fa fa-reply"></i></a>
							</div>
							<div class="detail-image">
								<img src="static/images/logo.png">
							</div>
							<div class="detail-content">
								<p class="app_name">
									APP-PAYMENT 
									&nbsp;&nbsp;&nbsp;&nbsp;<small class="badge badge-success badge-md" style="margin-top: -5px;">运行中</small>
								</p>
								<div class="row">
									<div class="col-lg-6">
										<p>
											<label>应用类型 : </label>
											<span>Java应用</span>
										</p>
										<p>
											<label>实例个数 : </label>
											<span>1/2</span>
										</p>
										<p>
											<label>访问地址 : </label>
											<span>paas.sinopec.com/instance/1.0/</span>
										</p>
										<p class="app-desc">
											<label>应用描述 : </label>
											<span>用描述应用描述,应用描述应用描述应用描述,应用描述应用描述应用描述应用描述,应用描述应用描述应用描述应用描述,应用描述应用描述应用描述应用描述,应用描述应用描述应用描述应用描述</span>
											<textarea class="form-control input-xs">用描述应用描述,应用描述应用描述应用描述,应用描述应用描述应用描述应用描述,应用描述应用描述应用描述应用描述,应用描述应用描述应用描述应用描述,应用描述应用描述应用描述应用描述</textarea>
											<a class="btn btn-default btn-desc-edit">
												<i class="fa fa-edit"></i>
												<i class="fa fa-check" style="display:none"></i>
											</a>
										</p>
									</div>
									<div class="col-lg-6">
										<p>
											<label class="label-sm">环境 : </label>
											<span>开发环境/容器部署/集成环境</span>
										</p>
										<p>
											<label class="label-sm">策略 : </label>
											<span><a href="#">滚动升级</a> | <a href="#">定时调度</a> | <a href="#">弹性伸缩</a></span>
										</p>
										<p>
											<label class="label-sm">创建 : </label>
											<span>2017-10-14 23:59:59</span>
										</p>
										<p>
											<label class="label-sm">更新 : </label>
											<span>2017-10-14 23:59:59</span>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>

		<%--=========================  过程可视化消息栏  ==========================--%>
		<jsp:include page="../framework/aside.jsp" />

		<%--=========================  左侧菜单  ==========================--%>
		<jsp:include page="../framework/lefter.jsp" />

	</div>

	<%--=========================  页面底部版权信息  ==========================--%>
	<jsp:include page="../framework/footer.jsp" />
	<%--=========================  选择皮肤功能  ==========================--%>
	<jsp:include page="../framework/page-set.jsp" />
</div>
<div id="floating-top-right" class="floating-container"></div>

<jsp:include page="../framework/script.jsp" />
<script
	src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script
	src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">
	$(function() {
		
		$('.app-desc .btn-desc-edit').click(function(){
			if($(this).find('.fa:visible').hasClass('fa-check')){
				var desc = $('.app-desc textarea').val();
				//备注为空，暂设定不通过
				if(!desc){
					return false;
				}
				//存储设定内容，可以发送http请求修改服务器
				$('.app-desc span').text(desc);
			}
			//切换状态
			$('.app-desc span,.app-desc textarea').toggle();
			$(this).find('.fa').toggle();
		});
		
		
	})
	
	
</script>
</body>
</html>

